function $(i){ return document.getElementById(i); }

function createEle(tag, parent, name)
{
    var ele = document.createElement(tag);
    parent.appendChild(ele);
    if (name)
    {
        ele.className = name;
    }

    return ele;
}

class Popup
{
    constructor(parent, id, width, height, offset)
    {
        this.parent = parent;
        this.main = createEle("div", parent, "popup");
        this.main.id = id;
        this.main.style.display = "none";
        this.main.style.width = width + "px";
        this.main.style.height = height + "px";
        this.main.style.left = parent.offsetLeft - offset + "px";
        this.main.style.top = parent.offsetTop + 40 + "px";

        this.main.addEventListener("click", (e)=>
        {
            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
        });
    }

    show()
    {
        this.main.style.display = "";
    }

    hide()
    {
        this.main.style.display = "none";
    }

    auto()
    {
        if (this.main.style.display == "none")
        {
            this.main.style.display = "";
        }
        else
        {
            this.main.style.display = "none";
        }
    }

    move(left, top)
    {
        this.main.style.left = left + "px";
        this.main.style.top = top + "px";
    }

    close()
    {
        parent.removeChild(this.main);
    }
}

class IdeaEditor
{
    constructor(ideaid, width, height)
    {
        this.idea = $(ideaid);
        this.idea.className = "ideaeditor";
        this.idea.style.width = width + "px";
        this.idea.style.height = height + "px";

        this.header = createEle("div", this.idea, "ideaeditor-header");
        this.editor = createEle("div", this.idea, "ideaeditor-editor");

        this.isforecolor = true;
        this.pop = new Map();
        this.pop.length = 16;
        this.initHeader();
        this.initEditor();
    }

    initHeader()
    {
        this.editor.innerText = "Hello, World";

        this.para = [];
        this.para[0] = ["标题", "formatblock", "h1", "H"];
        this.para[1] = ["加粗", "bold", null, "B"];		// 序号 注释 命令
        this.para[2] = ["斜体", "italic", null, "I"];
        this.para[3] = ["引用", "formatblock", "blockquote", "Q"];
        this.para[4] = ["无序列表", "insertUnorderedList", null, "N"];
        this.para[5] = ["有序列表", "insertOrderedList", null, "O"];
        this.para[6] = ["链接", "createlink", null, "L", 275, 125, 20];       // createLink
        this.para[7] = ["接入图像", "image", null, "M", 40, 150, 10];       // InsertImage
        this.para[8] = ["接入源码", "code", null, "C", 40, 150, 10];       // InsertImage
        this.para[9] = ["撤销", "undo", null, "V"];       // undo
        this.para[10] = ["重做", "redo", null, "R"];       // redo

        for (let i = 0; i < this.para.length; i++)
        {
            let button = createEle("div", this.header, "ideaeditor-header-button");
            button.title = this.para[i][0];
            let hover = createEle("div", button, "ideaeditor-header-hover");

            let img = createEle("img", hover);
            img.src = "res/" + this.para[i][3] + ".png";

            if (this.para[i].length == 7)
            {
                let popup = new Popup(button, this.para[i][1], this.para[i][4], this.para[i][5], this.para[i][6]);
                
                if (i == 6) this.initLink(popup);

                this.pop.set(i, popup);
                this.supple(i);
                
                button.addEventListener("click", (e)=>
                {
                    this.pop.forEach(element => 
                    {
                        if (element != popup)
                        {
                            element.hide();
                        }
                    });

                    popup.auto();
                    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
                });
            }
            else
            {
                button.addEventListener("click", ()=>
                {
                    document.execCommand(this.para[i][1], false, this.para[i][2]);
                });
            }
        }

        document.addEventListener("click", ()=>
        {
            this.pop.forEach(element => 
            {
                element.hide();
            });
        });
    }

    initLink(pop)
    {
        var title = createEle("div", pop.main, "title");
        title.innerText = "插入链接";

        var url = createEle("div", pop.main, "item");
        url.innerHTML = "<a>插入URL：</a><input type='text' class='url-input' />";

        // var repleace = createEle("div", pop.main, "item");
        // repleace.innerHTML = "<a>替换文本：</a><input type='text' class='repleace-input' />";

        var operation = createEle("div", pop.main, "operation");
        var confirm = createEle("button", operation, "confirm");
        confirm.innerText = "确定";
        var cancel = createEle("button", operation, "cancel");
        cancel.innerText = "取消";

        confirm.addEventListener("click", ()=>
        {
            document.execCommand("insertHTML", false, "<a href=" + url.value + "></a>");
            pop.hide();
        });

        cancel.addEventListener("click", ()=>
        {
            pop.hide();
        });
    }
    
    initEditor()
    {
        this.editor.designMode = "on";
        this.editor.contentEditable = true;
    }

    supple(no)
    {
    }
}